<template>
	<view style="margin-top: 300rpx;margin-left: 80rpx;" >
		<input type="number" v-model="phone" placeholder="请输入电话号码" maxlength="11" />
		<input type="number" v-model="msg" placeholder="请输入验证码" style="margin-top: 50rpx; width: 400rpx;" maxlength="6"/>
		<button id="button1"  @click="sendMsg()" 
     :disabled="isDisabled" style="color: white;background-color:dodgerblue" >{{buttonName}}</button>
	  <button style="width: 600rpx ;margin-left: 0;margin-top: 50rpx; background-color:dodgerblue" @click="login()">登录</button>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				phone:"",
				msg: "", //验证码
				buttonName: "获取验证码",
				isDisabled: false,//验证码再次发送
				time:"60",
				nickName:""
			}
		},
		onLoad(prop){
			// const props = defineProps({
			// 		nickName: String
			// 	})
			this.nickName  =  prop.nickName
			console.log(this.nickName)		
		},
		methods: {
			
			// 将手机号和昵称传给后端
			sendMsg() {
				// 手机号正则判断
				let reg =  /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

				// 判断输入框输入手机号
				if(this.phone.length == ""){	 
					wx.showToast({
						title: '请输入电话号码',
						icon: 'error',
					 	duration: 1500
					})
				} else if(this.phone.length < 11 || !reg.test(this.phone) ){
					wx.showToast({title: '电话号码格式错误',
					icon: 'error',
					duration: 1500
					})
				} else{
						wx.showToast({title: '已发送验证码',
						icon: 'success',
						duration: 1500
					})
					
				let me = this;
				me.isDisabled = true;
				let interval = setInterval(function () {
					me.buttonName = '重新获取(' + me.time + 's)';
					--me.time;
					if (me.time < 0) {
					    me.buttonName = "重新获取";
					    me.time = 60
					    me.isDisabled = false;
					    clearInterval(interval);
					}
				}, 1000);
				
				uni.request({
					url: 'http://124.220.177.66:8082/juben/getCode',
					method: 'post',
					data: {
					 	openID: this.phone,
					 	nickName: this.nickName
						},
					success: (res) => {
						console.log('登录接口后端传来数据',res);
				 		}
				 	})
				}
		    },
				  
				  
				  
				  
				  // 登录按钮
				  login(){
					  if(this.phone.length == ""){
						  wx.showToast({title: '请输入电话号码',
						 icon: 'error',
						 duration: 1500
					 })
					  } else if(this.msg.length == ""){
						wx.showToast({title: '请输入验证码',
					   icon: 'error',
					   duration: 1500
					 	})  
					  }else if(this.msg.length < 5 ){
						  wx.showToast({title: '验证码错误',
						  icon: 'error',
						  duration: 1500})
					  }else{
						  uni.request({
						  			url: 'http://124.220.177.66:8082/juben/login',
						  			method: 'post',
						  			data: {
						  				reqCode:this.msg,
										nickName:this.nickName
						  			},
						  			success: (res) => {
						  				console.log('登录成功得到后端传来的数据',res);
										if(res.data.code == 200 ){
											  wx.showToast({title: '登陆成功',
											  icon: 'success',
											  duration: 1500
										})
										console.log(this.nickName)
			// 将openID存在storage中
			uni.setStorageSync('openID', this.phone)
										uni.switchTab({
												url: '/pages/index/index',
										});  											
									}
						  			}
						  		})
						 
					  }
				  },
		}
		
	}
</script>

<style>
input{
	border: 1px solid black; 
	width: 600rpx ; 
	height: 100rpx;
	border-radius: 15rpx;
}
#button1{
	width: 200rpx;
	height: 100rpx;
	font-size: 22rpx;
	 padding: 25rpx; 
	 margin-right: 50rpx;
	 margin-top: -100rpx; 
}
#button2{
	width: 600rpx;
	margin-left: 0rpx;
	margin-top: 50rpx;
	background-color: cornflowerblue;
}
</style>
